<template>
	<view class="diybar" :style="{ height: navBarHeight }">
		<view class="nav-main" :style="{ height: menuHeight, top: menuTop, left: menuRight, right: menuRight}">

			<view class="nav-main-back" @click="goback" v-if="back">
				<view style="display: flex;align-items: center;height: 100%;width: 100%;">
					<u-icon name="arrow-left" bold color="#000000" size="20"></u-icon>
				</view>

			</view>
			<view class="nav-main-title"><text>{{title}}</text></view>
		</view>
		<image :src="src" class="background-image" :style="{ height: navBarHeight }"></image>
	</view>
</template>

<script>
	export default {
		name: "rf-navbar",
		props: {
			title: {
				type: String,
				required: false,
				default: "",
			},
			src: {
				type: String,
				required: false
			},
			back: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				statusBarHeight: this.statusBarHeight,
				navBarHeight: this.navBarHeight,
				menuHeight: this.menuHeight,
				menuRight: this.menuRight,
				menuTop: this.menuTop,
				menuBotton: this.menuBotton,

			};
		},
		methods: {
			goback() {
				this.$emit("click", "")
				console.log("navBarHeight" + this.navBarHeight);
				// uni.navigateBack();

			},
		}
	}
</script>

<style lang="less" scoped>
	.diybar {
		position: relative;
		z-index: 999;
		width: 100%;
		
		// height: 60px;
		.nav-main {

			z-index: 998;
			padding: 0 10rpx;
			position: fixed;
			display: flex;
			justify-content: center;
			align-items: center;

			.nav-main-back {
				
				position: absolute;
				left: 0rpx;
				// 返回按钮大小
				height: 100%;
				width: 100rpx;
			}

			.nav-main-title {

				width: calc(100vw - 10px);
				height: 50px;
				text-align: center;
				color: #000;
				font-size: 16px;
				font-weight: bold;
			}
		}

		.background-image {
			position: fixed;
			z-index: 997;
			left: 0;
			top: 0;
			width: 100%;
		}

	}
</style>